import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Modal, Form, Input,Select ,Table, InputNumber,Popconfirm,TreeSelect} from 'antd';
const TreeNode = TreeSelect.TreeNode;
const FormItem = Form.Item;
const Option = Select.Option;
var _this;

class PresetInfoDetailModal extends Component {
  constructor(props) {
    super(props);
  }

  okHandler = () => {
     const { onOk,form } = this.props;
     this.props.form.validateFields((err, values) => {
      if (!err) {
        onOk(values,form);
      }
     });
  };
  handleBrandChange= (value) => {
    this.props.form.setFieldsValue({modelId: undefined});//设置modelId控件的值为空
    this.props.queryAssetModel({brandId:value,typeId:_this.props.form.getFieldValue("typeId")});
  };

  handleTypeChange= (value) => {
    this.props.form.setFieldsValue({modelId: undefined});//设置modelId控件的值为空
    this.props.queryAssetModel({typeId:value,brandId:_this.props.form.getFieldValue("brandId")});
  };
  render() {
    const { children, dispatch,item,presetId,assetTypeTree,assetBrandList,assetModelList,onCancel } = this.props;
    const { getFieldDecorator,resetFields } = this.props.form;
    _this = this;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };

    const typeTreeData = (i) => {
      return i.map( d => {
        d.label = d.name;
        d.key = d.id_+'';
        d.value = d.id_+'';
        d.children = d.assetType && d.assetType.length > 0 ? typeTreeData(d.assetType) : [];
        return d;
      })
    }
    const getBrand = data => data.map((item) => {
      return <Option key={item.id_+''}>{item.name}</Option>
    })
    const getModel = data => data.map((item) => {
      return <Option key={item.id_+''}>{item.name}</Option>
    })
    function onCancelFn(){
      resetFields();
      onCancel()
    }
    return (
      <span>
        <Modal
                maskClosable= {this.props.maskClosable}
                confirmLoading= {this.props.confirmLoading}
                style={{ top: 50}}
                title={this.props.title}
                visible={this.props.visible}
                onOk={this.okHandler}
                onCancel={onCancelFn}
                key={this.props.newKey}
        >
          <div style={{width:'auto',position:'relative',backgroundColor:'#fff'}}>
        <div style={{}}>

          <div style={{width:'100%',paddingLeft:'20px',paddingTop:'10px'}}>
           <Form layout='horizontal' onSubmit={this.okHandler}>
            <FormItem style={{marginBottom:'0px'}}>
              {getFieldDecorator('id',{initialValue:item.id_})(
                <Input type="hidden"/>
              )}
            </FormItem>
            <FormItem style={{marginBottom:'0px'}}>
              {getFieldDecorator('presetId',{initialValue:presetId})(
                <Input type="hidden"/>
              )}
            </FormItem>

            <FormItem
                  {...formItemLayout}
                  label="资产编号"
                  hasFeedback
                >
                  {
                    getFieldDecorator('assetNo', {
                      initialValue: item.assetNo,
                      rules: [{ max: 20, message: '资产编号 20 字符以内' },]
                    })(<Input  placeholder="请输入资产编号" />)
                  }
            </FormItem>

            <FormItem
                  {...formItemLayout}
                  label="资产序列号"
                  hasFeedback
                >
                  {
                    getFieldDecorator('serialNo', {
                      initialValue: item.serialNo,
                      rules: [{ max: 20, message: '资产序列号 20 字符以内' },]
                    })(<Input  placeholder="请输入资产序列号" />)
                  }
            </FormItem>

            <FormItem
                  {...formItemLayout}
                  label="设备名称"
                  hasFeedback
                >
                  {
                    getFieldDecorator('assetName', {
                      initialValue: item.assetName,
                      rules: [{
                        required: true, whitespace: true, message: '请输入设备名称',
                      },{ max: 30, message: '设备名称 30 字符以内' }]
                    })(<Input  placeholder="请输入设备名称"  />)
                  }
            </FormItem>

            <FormItem
                  {...formItemLayout}
                  hasFeedback
                  label="资产分类"
                >
                  {
                    getFieldDecorator('typeId', {
                      initialValue:item.typeId_? item.typeId_ + '': undefined,
                      rules: [{
                        required: true, message: '请选择资产分类',
                      }]
                    })(
                      <TreeSelect
                        showSearch
                        treeNodeFilterProp="title"
                        dropdownStyle={{ maxHeight: 300, overflow: 'auto' }}
                        notFoundContent="无匹配结果"
                        placeholder="请选择资产分类"
                        onChange={this.handleTypeChange}
                        allowClear
                        treeData={typeTreeData(assetTypeTree)}
                        treeDefaultExpandAll
                      >
                      </TreeSelect>
                    )
                  }
                </FormItem>
                <FormItem
                  label="品牌"
                  hasFeedback
                  {...formItemLayout}
                >
                  {getFieldDecorator('brandId', {
                    initialValue:item.brandId_? item.brandId_ + '': undefined,
                    rules: [
                      { required: true, message: '请选择品牌' },
                    ],
                  })(
                    <Select
                       showSearch
                       onChange={this.handleBrandChange}
                       placeholder="请选择品牌">

                      {getBrand(assetBrandList)}
                    </Select>
                  )}
                 </FormItem>

                <FormItem
                  label="型号"
                  hasFeedback
                  {...formItemLayout}
                >
                  {getFieldDecorator('modelId', {
                    initialValue:item.modelId_? item.modelId_ + '': undefined,
                    rules: [
                      { required: true, message: '请选择型号' },
                    ],
                  })(
                    <Select
                      showSearch
                      placeholder="请选择型号"
                    >
                      {getModel(assetModelList)}
                    </Select>
                  )}
                </FormItem>
                <FormItem
                  label="价格"
                  hasFeedback
                  {...formItemLayout}
                >
                  {getFieldDecorator('price', {
                    initialValue:item.price,
                    rules: [
                      { required: true, message: '请填写价格' },
                    ],
                  })(<InputNumber placeholder="请填写价格" min={0} step={0.01} style={{width:240}} max={99999999}/>)}
                </FormItem>

                <FormItem
                      {...formItemLayout}
                      label="描述"
                      hasFeedback
                    >
                      {
                        getFieldDecorator('remark', {
                          initialValue: item.remark,
                          rules: [{ max: 200, message: '描述 200 字符以内' },]
                        })(<Input  type="textarea" rows={3}  placeholder="请填写描述" />)
                      }
                </FormItem>
          </Form>
          </div>
        </div>
       </div>

        </Modal>

      </span>
    );
  }

}

export default Form.create()(PresetInfoDetailModal)
